<?php $id_upload = isset($data['product_id']) ? $data['product_id'] : @genRandomString();?>
<link href="<?php echo base_url(JS_PUBLIC);?>/fileuploader/fileuploader.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="<?php echo base_url(JS_PUBLIC);?>/fileuploader/fileuploader.js" ></script>
<script>
    $(document).ready(function(){
        $('.calc').change(function(){
            price_old_data = $('[name="price_old"]').val();
            price_old = parseFloat($('[name="price_old"]').autoNumericGet());

            discount_data = $('[name="discount"]').val();
            discount = parseFloat($('[name="discount"]').autoNumericGet());
            tmp1 = $('#tmp').autoNumericSet(price_old * discount/100).val();
            $('#discount_tip').text('= '+ tmp1);

            discount_c_data = $('#category option:selected').attr('_discount');
            discount_c      = parseFloat(discount_c_data);
            tmp2 = $('#tmp').autoNumericSet(price_old * discount_c/100).val();
            $('#discount_c_tip').text(tmp2);

            price_new = Math.round(price_old * (1 - (discount + discount_c)/100));
            $('[name="price_new"]').val(price_new).autoNumeric();

            str = "= " + price_old_data + " - " + tmp1 + " - " + tmp2;
            $('#price_new_tip').text(str);
        });

        new qq.FileUploader({
            element: document.getElementById('upload_images'),
            allowedExtensions: ['jpeg', 'jpg', 'png', 'bmp', 'gif'],
            action: '<?php echo base_url('admin/upload').'?type=product&id='.$id_upload;?>',
            debug: false,
            uploadButtonText: "Click để tải ảnh lên",
            onSubmit: function() {
                $('#loading').show();
            },
            onComplete: function(id, fileName, responseJSON){
                if (responseJSON.success) {
                    image_str = $('#images_str').val();
                    $('#upload_list').append('<img onerror="ImgError(this);" width="120" height="100" _gallery_id="'+responseJSON.id+'" src="'+BASE_URL +'/'+responseJSON.path+'"/>');
                } else {
                    alert(responseJSON.msg);
                }
                $('#loading').hide();
            }
        });
        $('#upload_images .qq-upload-button').css({width: '160px', padding: '0px 5px'});

        var uploader_single = new qq.FileUploader({
            element: document.getElementById('avatar_uploader'),
            allowedExtensions: ['jpeg', 'jpg', 'png', 'bmp', 'gif'],
            action: '<?php echo base_url('admin/upload').'?type=product&id='.$id_upload.'&mode=simple';?>',
            debug: false,
            uploadButtonText: "Thay đổi ảnh đại diện",
            multiple: false,
            onSubmit: function() {
                $('#loading').show();
            },
            onComplete: function(id, fileName, responseJSON){
                console.log(responseJSON);
                if (responseJSON.success) {
                    $('#avatar_uploader_img').attr('src', BASE_URL+responseJSON.url);
                } else {
                    alert(responseJSON.msg);
                }
                $('#loading').hide();
            },
            uploadButtonText: "Thay đổi ảnh đại diện",
        });
        $('#avatar_uploader .qq-upload-button').css({width: '160px', padding: '5px'});

        $('.qq-upload-list').remove();

        $('#upload_list img').live('dblclick', function(){
            if (!confirm('Bạn có chắc chắn muốn xóa ảnh này không ?')){
                return false;
            }

            i = $(this);
            gallery_id = i.attr('_gallery_id');
            $.post('<?php echo base_url('admin/remove_image'); ?>', {gallery_id: gallery_id}, function(data){
                if (data == true){
                    i.remove();
                } else {
                    alert('Có lỗi khi xóa ảnh. Vui lòng thử lại !');
                }
            });
        });

        var width_window = $(window).width();

        if(width_window <= 767){
            $('#show_hide_avatar_uploader_img_zoom').html('Hiện ảnh lớn');
            $('#avatar_uploader_img_zoom').attr('status','hide');
            $('#avatar_uploader_img_zoom').hide();
        }
        else{

            $('#show_hide_avatar_uploader_img_zoom').html('Ẩn ảnh lớn');
            $('#avatar_uploader_img_zoom').attr('status','show');
            $('#avatar_uploader_img_zoom').show();
        }

        $('#show_hide_avatar_uploader_img_zoom').live('click',function(){
            var element = $('#avatar_uploader_img_zoom');
            if(element.attr('status') == 'show'){
                $('#avatar_uploader_img_zoom').fadeIn();
                $(this).html('Ẩn ảnh lớn');
                element.attr('status','hide');
            }else{
                $('#avatar_uploader_img_zoom').fadeOut();
                $(this).html('Hiện ảnh lớn');
                element.attr('status','show');
            }
            return false;
        });
    });
</script>
<style>
    #upload_list img {
        margin: 5px 5px 5px 0px;
        border: 1px solid #CCC;
    }
</style>
<div id="tmp"></div>
<div id="loading" style="position: fixed;top: 20%;left: 50%;text-align: center; padding: 5px 10px; background: white;border: 1px solid #CCC;font-weight: bold; display: none;">Đang tải lên. Vui lòng chờ</div>
<?php echo form_open_multipart('', array('class' => 'form-horizontal'))?>
    <legend><?php echo isset($data) ? 'Sửa' : 'Thêm mới';?> sản phẩm</legend>
    <?php if (isset($error)):?>
        <div class="alert alert-error"><?php echo $error;?></div>
    <?php else :?>
        <?php if (isset($msg)):?><div class="alert alert-success"><?php echo $msg;?></div><?php endif;?>
    <?php endif;?>
    <div class="control-group">
        <label class="control-label" for="title">Tên sản phẩm</label>
        <div class="controls">
            <input type="text" class="input-xxlarge" name="title" id="title" value="<?php echo @$data['title'];?>" placeholder="Tên sản phẩm">
        </div>
    </div>



    <div class="control-group">
        <label class="control-label" for="avatar">Ảnh đại diện</label>
        <div class="controls">
            <img onerror="ImgError(this);" id="avatar_uploader_img" width="170" height="150" src="<?php echo base_url('uploads/product/'.$data['product_id'].'/'.md5($id_upload).'.jpg?t='.time());?>" />
            <button class="btn" id="show_hide_avatar_uploader_img_zoom" style="position:fixed;top:30%;right:0px;color:#F00;font-weight:bold;"></button>
            <img id="avatar_uploader_img_zoom" status="hide" style="position:fixed;bottom:0px;right:0px;" width="340" height="300" src="<?php echo base_url('uploads/product/'.$data['product_id'].'/'.md5($id_upload).'.jpg?t='.time());?>" />
            <div id="avatar_uploader" style=""></div>
            <!--
            <input type="file" class="input-xxlarge" name="avatar" />
            <?php if (isset($data['avatar'])):?>
            <?php echo form_hidden('avatar_old', $data['avatar']);?>
            <br /><img width="160" height="120" src="<?php echo base_url().'/uploads/thumbs/'.$data['avatar'];?>" />
            <?php endif;?>
             -->
        </div>
    </div>

    <div class="control-group">
        <label class="control-label" for="description">Ảnh sản phẩm<br /><span style="color: #999; font-size: 11px;">Click đúp chuột vào ảnh để xóa ảnh.</span></label>
        <div class="controls">
            <?php if (isset($data['product_id'])): ?>
            <div id="upload_list">
                <div style="text-align: left; line-height:30px; color: green;">
                    <div id="upload_images">
                        <noscript>
                            <p>Please enable JavaScript to use file uploader.</p>
                        </noscript>
                    </div>
                </div>
                <?php if (isset($images) && (count($images) > 0)):?>
                    <?php foreach($images as $key => $value):?>
                    <img onerror="ImgError(this);" width="120" height="100" _gallery_id="<?php echo $value['gallery_id'];?>" src="<?php echo base_url().'/uploads/product/'.$value['product_id'].'/'.$value['image'];?>" />
                    <?php endforeach;?>
                <?php endif;?>
            </div>
            <?php else :?>
            Vui lòng lưu thông tin sản phẩm trước khi upload ảnh sản phẩm
            <?php endif;?>
        </div>
    </div>

    <!--
    <div class="control-group">
        <label class="control-label" for="position">Thứ tự</label>
        <div class="controls">
            <input type="text" class="input-xxlarge" name="position" id="position"" value="<?php echo @$data['"position"'];?>" placeholder="Thứ tự hiển thị">
        </div>
    </div>
    -->

    <div class="control-group">
        <label class="control-label" for="manufacturer">Nhà sản xuất</label>
        <div class="controls">
            <?php echo form_dropdown('manufacture', @$manufacturer, @$data['manufacture'], 'class="input-xlarge"')?>
        </div>
    </div>

    <div class="control-group">
        <label class="control-label" for="category">Danh mục sản phẩm</label>
        <div class="controls">
            <select class="calc input-xlarge" name="category" id="category">
                <?php foreach($category as $key => $value) :?>
        <?php if ($value['parent_id'] == 0) :?>
                <option <?php echo (@$data['category_id'] == $value['category_id']) ? 'selected="selected"' : ''; ?> value="<?php echo $value['category_id'];?>" _discount="<?php echo $value['discount'];?>"><?php echo $value['title'] . ' ('.$value['discount'].'%)';?></option>
        <?php endif; ?>

        <?php foreach($category as $key2 => $value2) :?>
        <?php if ($value2['parent_id'] == $value['category_id']) :?>
            <option <?php echo (@$data['category_id'] == $value2['category_id']) ? 'selected="selected"' : ''; ?> value="<?php echo $value2['category_id'];?>" _discount="<?php echo $value2['discount'];?>"><?php echo '--- '.$value2['title'] . ' ('.$value2['discount'].'%)';?></option>
        <?php endif; ?>
        <?php endforeach; ?>
                <?php endforeach;?>
            </select>
            <div id="discount_c_tip" style="color: red; margin-top: 10px;"></div>
        </div>
    </div>

    <div class="control-group">
        <label class="control-label" for="price_old">Giá cũ</label>
        <div class="controls">
            <input type="text" class="calc numeric input-xxlarge" name="price_old" id="price_old" value="<?php echo @$data['price_old'];?>" placeholder="Giá cũ">
        </div>
    </div>

    <div class="control-group">
        <label class="control-label" for="price_old">Tỉ lệ giảm giá (%)</label>
        <div class="controls">
            <input type="text" class="calc numeric input-xxlarge" name="discount" id="discount" value="<?php echo @$data['discount'];?>" placeholder="Tỉ lệ % giảm giá">
            <div id="discount_tip" style="color: red; margin-top: 10px;"></div>
        </div>
    </div>

    <div class="control-group">
        <label class="control-label" for="price_new">Giá mới</label>
        <div class="controls">
            <input type="text" class="numeric input-xxlarge" name="price_new" id="price_new" value="<?php echo @$data['price_new'];?>" placeholder="Giá mới" readonly="readonly">
            <div id="price_new_tip" style="color: red; margin-top: 10px;"></div>
        </div>
    </div>

    <div class="control-group">
        <label class="control-label" for="quantity">Số lượng</label>
        <div class="controls">
            <input type="text" class="numeric input-xxlarge" name="quantity" id="quantity" value="<?php echo @$data['quantity'];?>" placeholder="Số lượng sản phẩm hiện có">
        </div>
    </div>

    <div class="control-group">
        <label class="control-label" for="color">Màu sắc</label>
        <div class="controls">
            <input type="text" class="input-xxlarge" name="color" id="color" value="<?php echo @$data['color'];?>" placeholder="Màu sắc sản phẩm hiện có">
        </div>
    </div>

    <div class="control-group">
        <label class="control-label" for="material">Chất liệu</label>
        <div class="controls">
            <input type="text" class="input-xxlarge" name="material" id="material" value="<?php echo @$data['material'];?>" placeholder="Chất liệu sản phẩm hiện có">
        </div>
    </div>

    <div class="control-group">
        <label class="control-label" for="quantity">Chiều rộng (Width)</label>
        <div class="controls">
            <input type="text" class="input-xxlarge" name="width" id="width" value="<?php echo @$data['width'];?>" placeholder="Chiều rộng của sản phẩm">
        </div>
    </div>

    <div class="control-group">
        <label class="control-label" for="width">Chiều rộng (Width)</label>
        <div class="controls">
            <input type="text" class="input-xxlarge" name="width" id="width" value="<?php echo @$data['width'];?>" placeholder="Chiều rộng của sản phẩm">
        </div>
    </div>

    <div class="control-group">
        <label class="control-label" for="height">Chiều cao (height)</label>
        <div class="controls">
            <input type="text" class="input-xxlarge" name="height" id="height" value="<?php echo @$data['height'];?>" placeholder="Chiều cao của sản phẩm">
        </div>
    </div>

    <div class="control-group">
        <label class="control-label" for="depth">Chiều sâu (depth)</label>
        <div class="controls">
            <input type="text" class="input-xxlarge" name="depth" id="depth" value="<?php echo @$data['depth'];?>" placeholder="Chiều sâu của sản phẩm">
        </div>
    </div>

    <div class="control-group">
        <label class="control-label" for="weight">Trọng lượng (weight)</label>
        <div class="controls">
            <input type="text" class="input-xxlarge" name="weight" id="weight" value="<?php echo @$data['weight'];?>" placeholder="Trọng lượng của sản phẩm">
        </div>
    </div>

    <div class="control-group">
        <label class="control-label" for="size">Size</label>
        <div class="controls">
            <input type="text" class="input-xxlarge" name="size" id="size" value="<?php echo @$data['size'];?>" placeholder="Cỡ của sản phẩm">
        </div>
    </div>

    <div class="control-group">
        <label class="control-label" for="intro">Mô tả ngắn gọn</label>
        <div class="controls">
            <textarea name="intro" class="input-xxlarge" rows="5"><?php echo @$data['intro'];?></textarea>
        </div>
    </div>

    <div class="control-group">
        <label class="control-label" for="description">Mô tả chi tiết</label>
        <div class="controls">
            <textarea name="description" class="input-xxlarge" rows="5"><?php echo @$data['description'];?></textarea>
        </div>
    </div>

    <div class="control-group" style="position:fixed;right:0px;top:40%;">
        <div class="controls">
            <?php echo form_hidden('product_id', $data['product_id']);?>
            <button type="submit" style="color:#F00;font-weight:bold;" class="btn"><?php echo isset($data) ? 'Lưu sản phẩm' : 'Thêm mới sản phẩm';?></button>
        </div>
    </div>
</form>